/* ==========================================================================
   Adventio — Component styles
   Class-based styling for the React primitives. Imported from styles.css so
   consumers and UI kits get these for free. All values reference design tokens.
   Namespace: .adv-*
   ========================================================================== */

/* ============================ Button ============================ */
.adv-btn {
  --_h: 36px; --_px: 14px; --_fs: var(--text-base); --_gap: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--_gap); height: var(--_h); padding: 0 var(--_px);
  font: var(--weight-semibold) var(--_fs)/1 var(--font-sans);
  letter-spacing: var(--tracking-tight);
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: var(--transition-control), transform var(--duration-fast) var(--ease-standard);
}
.adv-btn:active { transform: translateY(0.5px); }
.adv-btn:disabled, .adv-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; transform: none; }
.adv-btn:focus-visible { box-shadow: var(--ring-focus); }
.adv-btn--sm { --_h: 30px; --_px: 11px; --_fs: var(--text-sm); --_gap: 6px; }
.adv-btn--lg { --_h: 44px; --_px: 20px; --_fs: var(--text-lg); --_gap: 9px; }
.adv-btn--block { display: flex; width: 100%; }
.adv-btn__icon { display: inline-flex; flex-shrink: 0; }
.adv-btn__icon svg { width: 1.15em; height: 1.15em; display: block; }

.adv-btn--primary { background: var(--action-primary); color: var(--on-action-primary); box-shadow: var(--shadow-xs); }
.adv-btn--primary:hover:not(:disabled) { background: var(--action-primary-hover); }
.adv-btn--primary:active:not(:disabled) { background: var(--action-primary-active); }

.adv-btn--accent { background: var(--action-accent); color: var(--on-action-accent); box-shadow: var(--shadow-xs); }
.adv-btn--accent:hover:not(:disabled) { background: var(--action-accent-hover); }
.adv-btn--accent:active:not(:disabled) { background: var(--action-accent-active); }

.adv-btn--secondary { background: var(--surface-card); color: var(--text-default); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.adv-btn--secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--stone-400); }
.adv-btn--secondary:active:not(:disabled) { background: var(--surface-active); }

.adv-btn--ghost { background: transparent; color: var(--text-default); }
.adv-btn--ghost:hover:not(:disabled) { background: var(--surface-hover); }
.adv-btn--ghost:active:not(:disabled) { background: var(--surface-active); }

.adv-btn--danger { background: var(--rust-500); color: #fff; box-shadow: var(--shadow-xs); }
.adv-btn--danger:hover:not(:disabled) { background: var(--rust-600); }
.adv-btn--danger:active:not(:disabled) { background: var(--rust-700); }

.adv-btn__spinner { width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: adv-spin 0.6s linear infinite; }
@keyframes adv-spin { to { transform: rotate(360deg); } }

/* ============================ IconButton ============================ */
.adv-iconbtn {
  --_s: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--_s); height: var(--_s); padding: 0;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: var(--transition-control);
}
.adv-iconbtn svg { width: 18px; height: 18px; display: block; }
.adv-iconbtn--sm { --_s: 30px; }
.adv-iconbtn--sm svg { width: 16px; height: 16px; }
.adv-iconbtn--lg { --_s: 44px; }
.adv-iconbtn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-default); }
.adv-iconbtn:active:not(:disabled) { background: var(--surface-active); }
.adv-iconbtn:focus-visible { box-shadow: var(--ring-focus); }
.adv-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.adv-iconbtn--solid { background: var(--surface-card); border-color: var(--border-default); box-shadow: var(--shadow-xs); }

/* ============================ Badge / status pill ============================ */
.adv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-normal);
  padding: 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid; white-space: nowrap;
}
.adv-badge--square { border-radius: var(--radius-xs); }
.adv-badge__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.adv-badge--success { color: var(--status-success-fg); background: var(--status-success-bg); border-color: var(--status-success-bd); }
.adv-badge--success .adv-badge__dot { background: var(--status-success-dot); }
.adv-badge--warning { color: var(--status-warning-fg); background: var(--status-warning-bg); border-color: var(--status-warning-bd); }
.adv-badge--warning .adv-badge__dot { background: var(--status-warning-dot); }
.adv-badge--danger { color: var(--status-danger-fg); background: var(--status-danger-bg); border-color: var(--status-danger-bd); }
.adv-badge--danger .adv-badge__dot { background: var(--status-danger-dot); }
.adv-badge--info { color: var(--status-info-fg); background: var(--status-info-bg); border-color: var(--status-info-bd); }
.adv-badge--info .adv-badge__dot { background: var(--status-info-dot); }
.adv-badge--neutral { color: var(--status-neutral-fg); background: var(--status-neutral-bg); border-color: var(--status-neutral-bd); }
.adv-badge--neutral .adv-badge__dot { background: var(--status-neutral-dot); }
.adv-badge--brand { color: var(--status-brand-fg); background: var(--status-brand-bg); border-color: var(--status-brand-bd); }
.adv-badge--brand .adv-badge__dot { background: var(--status-brand-dot); }
.adv-badge--accent { color: var(--status-accent-fg); background: var(--status-accent-bg); border-color: var(--status-accent-bd); }
.adv-badge--accent .adv-badge__dot { background: var(--status-accent-dot); }

/* ============================ Tag (removable filter chip) ============================ */
.adv-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  color: var(--text-default); background: var(--surface-sunken);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.adv-tag__close { display: inline-flex; cursor: pointer; color: var(--text-subtle); border-radius: var(--radius-xs); padding: 1px; }
.adv-tag__close:hover { color: var(--text-default); background: var(--surface-active); }
.adv-tag__close svg { width: 13px; height: 13px; display: block; }

/* ============================ Avatar ============================ */
.adv-avatar {
  --_s: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--_s); height: var(--_s); border-radius: 50%;
  font: var(--weight-semibold) calc(var(--_s) * 0.4)/1 var(--font-sans);
  color: var(--pine-700); background: var(--pine-100);
  overflow: hidden; flex-shrink: 0; user-select: none;
}
.adv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adv-avatar--xs { --_s: 24px; }
.adv-avatar--sm { --_s: 30px; }
.adv-avatar--lg { --_s: 48px; }
.adv-avatar--clay { color: var(--clay-700); background: var(--clay-100); }
.adv-avatar--stone { color: var(--stone-700); background: var(--stone-200); }
.adv-avatar--sky { color: var(--sky-700); background: var(--sky-100); }

/* ============================ Card ============================ */
.adv-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.adv-card--raised { box-shadow: var(--shadow-md); border-color: var(--border-subtle); }
.adv-card--flat { box-shadow: none; }
.adv-card--interactive { cursor: pointer; transition: box-shadow var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard); }
.adv-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.adv-card__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.adv-card__title { font: var(--type-h3); color: var(--text-strong); }
.adv-card__body { padding: var(--space-5); }
.adv-card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }

/* ============================ Field / Input / Select ============================ */
.adv-field { display: flex; flex-direction: column; gap: 6px; }
.adv-field__label { font: var(--type-label-sm); color: var(--text-default); }
.adv-field__label .adv-req { color: var(--clay-500); margin-left: 2px; }
.adv-field__help { font: var(--type-caption); color: var(--text-subtle); }
.adv-field__error { font: var(--type-caption); color: var(--status-danger-fg); }

.adv-input, .adv-select {
  --_h: 36px;
  width: 100%; height: var(--_h); padding: 0 11px;
  font: var(--type-body); color: var(--text-default);
  background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  transition: var(--transition-control);
  appearance: none;
}
.adv-input::placeholder { color: var(--text-subtle); }
.adv-input:hover, .adv-select:hover { border-color: var(--border-strong); }
.adv-input:focus, .adv-select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.adv-input:disabled, .adv-select:disabled { background: var(--surface-disabled); color: var(--text-disabled); cursor: not-allowed; }
.adv-input--sm, .adv-select--sm { --_h: 30px; font: var(--type-body-sm); }
.adv-input--lg { --_h: 44px; font: var(--type-body-lg); }
.adv-input--invalid, .adv-select--invalid { border-color: var(--rust-500); }
.adv-input--invalid:focus { box-shadow: var(--ring-danger); }

/* input with leading icon / addon */
.adv-input-wrap { position: relative; display: flex; align-items: center; }
.adv-input-wrap__icon { position: absolute; left: 11px; display: inline-flex; color: var(--text-subtle); pointer-events: none; }
.adv-input-wrap__icon svg { width: 16px; height: 16px; display: block; }
.adv-input-wrap .adv-input { padding-left: 34px; }

.adv-select-wrap { position: relative; display: flex; align-items: center; }
.adv-select { padding-right: 32px; cursor: pointer; }
.adv-select-wrap__chevron { position: absolute; right: 10px; pointer-events: none; color: var(--text-subtle); display: inline-flex; }
.adv-select-wrap__chevron svg { width: 16px; height: 16px; display: block; }

/* ============================ Checkbox / Switch ============================ */
.adv-checkbox { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: var(--type-body); color: var(--text-default); }
.adv-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.adv-checkbox__box {
  width: 18px; height: 18px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong); background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: var(--transition-control); flex-shrink: 0;
}
.adv-checkbox__box svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.6); transition: all var(--duration-fast) var(--ease-spring); }
.adv-checkbox input:checked + .adv-checkbox__box { background: var(--action-primary); border-color: var(--action-primary); }
.adv-checkbox input:checked + .adv-checkbox__box svg { opacity: 1; transform: scale(1); }
.adv-checkbox input:focus-visible + .adv-checkbox__box { box-shadow: var(--ring-focus); }
.adv-checkbox input:disabled + .adv-checkbox__box { opacity: 0.5; }

.adv-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: var(--type-body); color: var(--text-default); }
.adv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.adv-switch__track {
  width: 38px; height: 22px; border-radius: var(--radius-pill);
  background: var(--stone-300); padding: 2px; transition: background var(--duration-normal) var(--ease-standard); flex-shrink: 0;
}
.adv-switch__thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration-normal) var(--ease-spring); }
.adv-switch input:checked + .adv-switch__track { background: var(--action-primary); }
.adv-switch input:checked + .adv-switch__track .adv-switch__thumb { transform: translateX(16px); }
.adv-switch input:focus-visible + .adv-switch__track { box-shadow: var(--ring-focus); }
.adv-switch input:disabled + .adv-switch__track { opacity: 0.5; }

/* ============================ Stat (metric) ============================ */
.adv-stat { display: flex; flex-direction: column; gap: 6px; }
.adv-stat__label { font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.adv-stat__value { font: var(--weight-bold) var(--text-3xl)/1 var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.adv-stat__row { display: flex; align-items: center; gap: 8px; }
.adv-stat__delta { display: inline-flex; align-items: center; gap: 3px; font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); }
.adv-stat__delta svg { width: 14px; height: 14px; }
.adv-stat__delta--up { color: var(--fern-600); }
.adv-stat__delta--down { color: var(--rust-600); }
.adv-stat__sub { font: var(--type-caption); color: var(--text-subtle); }